<template>
  <div>
    <div class="top-bg" >
      <div class="item">
        <div class="first mr-10">券模板名称:</div>
        <el-input placeholder="请输入券模板名称" clearable maxlength="50" v-model="params.templateName"></el-input>
      </div>
      <div class="item">
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetClick">重置</el-button>
      </div>
    </div>
    <div class="bg">
      <el-button type="primary" class="mb-20" @click="addTicket">新增券模板</el-button>
      <el-table :data="dataList"  stripe style="width: 100%;" border :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}">
        <el-table-column prop="templateName" label="模板名称"></el-table-column>
        <el-table-column prop="templateType" label="模板类型"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="flagSend" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editRow(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
                     :current-page="params.page" :page-sizes="[10, 20, 30, 50]" :page-size="params.pageSize"
                     :layout="params.total<10?'->,total':'->,total, sizes, prev, pager, next, jumper'" :total="params.total">
      </el-pagination>
    </div>
    <el-dialog :title="(isEdit ? '编辑' : '新增') + '券模板'" :visible.sync="dialogVisible" width="30%">
      <el-form :model="rowFormData" ref="form" :rules="rules" label-width="80px">
        <el-form-item label="模板名称" prop="templateName">
          <el-input v-model="rowFormData.templateName" placeholder="请输入模板名称"></el-input>
        </el-form-item>
        <el-form-item label="模板类型" prop="templateType">
          <el-select v-model="rowFormData.templateType" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  KAFEE_GET_TICKET_LIST, KAFEE_POST_TICKET_CREATE,
  KAFEE_POST_TICKET_ROW
} from "@/assets/const/api";
import {Validate} from "js-utils/validate";

export default {
  name: 'index',
  mixins: [],
  components: {},
  props: {},
  data () {
    return {
      dialogVisible:false,
      currentRow:{},
      dataList:[],
      options:[],
      rowFormData:{
        templateName:'',
        templateType:1,
      },
      rules:{
        templateName:[
          {required: true,message:'模板名称不能为空',trigger: ['blur']}
        ]
      },
      params:{
        current:1,
        size:10,
        total:0,
        templateName:''
      },
    }
  },
  computed: {
    isEdit(){
      return !Validate.isEmpty(this.currentRow);
    }
  },
  watch: {},
  created () {},
  mounted () {
    this.getData();
  },
  methods: {
    getData(){
      this.$http.get(KAFEE_GET_TICKET_LIST,this.params).then(res => {
        this.dataList = res.data?.records||[];
        this.params.total = res.data.total||0;
      });
    },
    handleCurrentChange(val){
      this.params.page = val
      this.getData()
    },
    handleSizeChange(val){
      this.params.pageSize = val
      this.getData()
    },
    editRow(row){
      this.currentRow = row;

    },
    deleteClick(row){
      this.$confirm('确认删除该优惠券?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(KAFEE_POST_TICKET_ROW,{id:row.id}).then(res=>{
          if(res.code === 200){
            this.$message.success('操作成功');
            this.getData();
          }
        })
      }).catch(()=>{})
    },

    handleSearch(){
      this.params.page = 1;
      this.getData()
    },
    resetData(){
      this.params = {current: 1,size:10,total:0,templateName:''}
    },
    resetClick(){
      this.resetData()
      this.getData()
    },
    addTicket(){
      this.dialogVisible = true;
    },
    submitForm(){
      this.$refs['form'].validate((valid, object) => {
        if (valid) {
          this.$http.post(KAFEE_POST_TICKET_CREATE,this.rowFormData).then(res => {
            this.$message.success('操作成功');
            this.dialogVisible = false;
            this.resetClick();
          });
        } else {
          let key = Object.keys(object)[0];
          this.$message.error(object[key][0].message);
          return false;
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.bg{
  background-color: white;
  padding: 20px;
}
.main-img{
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.top-bg{
  background-color: #f9f9f9;
  border: 1px solid #ebeef5;
  min-height: 60px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  padding: 18px 0 0;
  display: flex;
  align-items: center;
  .item{
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 18px;
    flex-shrink: 0;

  }
  .first{
    min-width: 100px;
    text-align: right;
  }
}
</style>